<template>
    <div class="container">
        <div class="box search-box">
            <el-input prefix-icon="el-icon-search" placeholder="请输入门店进行搜索" v-model="search.keyword" style="width:100%;" clearable  />
            <div class="search-right">
                <el-button @click="changeType('')" type="text">全部</el-button>
                <el-button @click="changeType(1)" type="text">线上</el-button>
                <el-button @click="changeType(2)" type="text">线下</el-button>
            </div>
        </div>

        <div class="box" v-loading="search.loading">

            <div class="empty" v-if="search.list.length === 0">暂无数据</div>


            <div class="store" v-for="(item,index) in search.list" :key="index">
                <div @click="toPage('/store/detail/'+item.id)" >{{item.shopName}}【{{item.type === 1 ? '线上店铺' : '线下店铺'}}】</div>
                <div @click="toPage('/store/detail/'+item.id)" class="store-desc">{{item.shopPrincipalName}} {{item.shopPrincipalPhone}}</div>
                <div class="store-right">
                    <div><el-button @click="showQrCode(index)" type="text" >查看二维码</el-button></div>
                    <!-- <div><el-button :loading="downloadQrcode" @click="savQrcode(index)" type="text">保存二维码</el-button></div> -->
                </div>
            </div>

            <div v-if="search.list.length > 0" class="next-btn">
                <div>共{{search.page}}/{{search.totalPage}}页，{{search.totalRow}}条</div>
                <div style="margin-top:10px;" >
                    <span @click="jumpPage(search.page - 1)" >上一页</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span @click="jumpPage(search.page + 1)">下一页</span>
                </div>
            </div>

        </div>
        <div style="width:100%;height:65px;" ></div>
        <div class="footer-btns">
            <el-button @click="toPage('/store/update/0')" type="primary" style="width:100%;" >新增门店</el-button>
        </div>

        <el-dialog :visible.sync="qrcode.show" width="80%" :close-on-click-modal="false">
            <el-carousel height="300px" indicator-position="outside">
                <el-carousel-item v-for="(item,index) in qrcode.imgs" :key="index">
                    <div style="text-align:center;" >
                        <img :src="item.url" style="width:200px;height:200px;margin:auto;" />
                        <div style="width:100%;margin-top:10px;text-align:center;">{{qrcode.shopName}}</div>
                        <div style="width:100%;margin-top:10px;text-align:center;">{{item.title}}</div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-dialog>

    </div>
</template>
<script>
export default {
    components:{},
    data:function(){
        return {
            search:{
                keyword:'',type:'',loading:false,page:1,pageSize:20,totalPage:0,totalRow:0,list:[]
            },
            downloadQrcode:false,
            qrcode:{
                shopName:'',
                show:false,
                imgs:[]
            }
        };
    },
    created:function(){
        this.loadData();
    },
    methods:{
        changeType(type){
            if(this.search.loading){
                return ;
            }
            this.search.page = 1;
            this.search.totalPage = 0;
            this.search.type = type;
            this.loadData();
        },
        jumpPage(page){
            if(this.search.loading || page <= 0 || (this.search.totalPage !== 0 && page > this.search.totalPage)){
                return;
            }
            this.search.page = page;
            this.loadData();
        },
        loadData(){
            var that = this;
            var body = {
                pageNo:that.search.page,
                ppageSize:that.search.pageSize,
                type:that.search.type,
                shopName:that.search.keyword
            }
            that.search.loading = true;
            that.$api.post('/channel/channelShop/find.json',body).then(data =>{
                that.search.loading = false;
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                that.search.list = data.data.data.list;
                that.search.totalPage = data.data.data.totalPage;
                that.search.totalRow = data.data.data.totalRow;
            }).catch(()=>{
                that.search.loading = false;
            });
        },
        showQrCode(index){
            var row = this.search.list[index];
            this.qrcode.imgs = this.getImgs(row);
            this.qrcode.shopName = row.shopName;
            this.qrcode.show = true;
        },
        getImgs(row){
            var imgs = [];
            if(this.isNotBlank(row.wxQrcode)){
                imgs.push({title:'微信门店码',url:row.wxQrcode});
            }
            if(this.isNotBlank(row.miniUrl)){
                var qrCode = 'https://api.pwmqr.com/qrcode/create/?url='+encodeURIComponent(row.miniUrl)+"&mhid=sELPDFnok80gPHovKdI";
                imgs.push({title:'支付宝门店码',url:qrCode});
            }
            return imgs;
        },
        savQrcode(index){
            var row = this.search.list[index];
            var imgs = this.getImgs(row);
            if(imgs.length === 0){
                this.$message.error('没有有效二维码');
                return ;
            }
            this.downloadQrcode = true;
            var els = [];
            try{
                for(var i = 0 ;i  < imgs.length ; i ++){
                    var img = imgs[i];
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = img.url
                    link.setAttribute('download', img.title + '.jpg');
                    document.body.appendChild(link)
                    link.click()
                    els.push(link);
                }
            }catch(e){
                this.$message.error('二维码保存失败');
            }
            els.forEach(item =>{
                document.body.removeChild(item);
            });
            this.downloadQrcode = false;
        }
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding:0;
    }
    .empty{width: 100%;text-align: center;padding: 40px 0;font-size: 12px;color: #909399;}
    .next-btn{text-align:center;margin-top: 20px;color: #409EFF;}
    .box{
        width: 100%;
        position: relative;
        padding: 10px;
    }

    .search-box{
        padding: 10px 130px 10px 10px;
        position: relative;
    }
    .search-box .search-right{
        position: absolute;
        top:9px;right:10px;
    }
    .store{
        width: 100%;
        padding: 15px 90px 10px 10px;
        position: relative;
        margin-top: 10px;
        background: #fff;
    }
    .store .store-desc{
        font-size: 14px;color: #606266;margin-top: 10px;
    }
    .store .store-right{
        position: absolute;
        top:10px;
        right:10px;
    }
    .footer-btns{
        position: fixed;
        width: 100%;
        left: 0;bottom: 60px;
        padding: 10px 10px 20px 10px;
        background: #fff;
        border-top: 1px solid #DCDFE6;
    }
</style>
